<template>
  <footer class="footer">
    <span class="todo-count">
      剩余<strong>{{ leftCount }}</strong>
    </span>
    <ul class="filters">
      <li>
        <a :class="{ selected: status === 'all' }" @click="changeStatus('all')" href="javascript:;">全部</a>
      </li>
      <li>
        <a :class="{ selected: status === 'active' }" @click="changeStatus('active')" href="javascript:;">未完成</a>
      </li>
      <li>
        <a :class="{ selected: status === 'completed' }" @click="changeStatus('completed')" href="javascript:;">已完成</a>
      </li>
    </ul>
    <button @click="clearDone" class="clear-completed">清除已完成</button>
  </footer>
</template>

<script lang="ts" setup>
import { Status, Todo } from '@/types'
import { defineProps, defineEmits, computed } from '@vue/runtime-core'
// 定义 Props 接收父组件传过来的数据
const props = defineProps<{ list: Todo[]; status: Status }>()
// 定义 Emits 接收父组件的自定义事件
const emit = defineEmits<{(event: 'clearDone'): void; (event: 'changeStatus', value: Status): void; }>()

// 删除已完成任务
const clearDone = () => {
  emit('clearDone')
}

// 计算剩余任务数量
const leftCount = computed(() => {
  return props.list.filter((v) => !v.done).length
})

// 高亮切换效果
const changeStatus = (value:Status) => {
  emit('changeStatus', value)
}
</script>
